<template>
  <div class="m-container">
    <div class="container-fluid" style="min-width: 1400px;">
      <div class="row">
        <div class="col-md-12">
          <div class="row">
            <div class="col-md-8">
              <leafletMap style="height: 400px"></leafletMap>
            </div>
            <div class="col-md-4" style="text-align:center">
              <!--<deviceChart style="height: 150px"></deviceChart>-->
              <!--<connectChart style="height: 150px"></connectChart>-->
              <ul>
                  <li><label style="width:50px">天窗</label><input name="tianchuang" type="checkbox" data-size="small"></li>
                  <li><label style="width:50px">外遮阳</label><input name="waizheyang" type="checkbox" data-size="small"></li>
                  <li><label style="width:50px">内遮阳</label><input name="neizheyang" type="checkbox" data-size="small"></li>
                  <li><label style="width:50px">湿帘</label><input name="shilian" type="checkbox" data-size="small"></li>
                  <li><label style="width:50px">喷头</label><input name="pentou" type="checkbox" data-size="small"></li>
                  <li><label style="width:50px">风机</label><input name="fengji" type="checkbox" data-size="small"></li>
              </ul>
            </div>
          </div>
          <div class="row" style="margin-top:30px;">
            <div class="col-md-12">
              <div class="row">
                <div class="col-md-4">
                  <cpuChart style="height:200px"></cpuChart>
                </div>
                <div class="col-md-4">
                  <memoryChart style="height:200px"></memoryChart>
                </div>
                <div class="col-md-4">
                  <networkChart style="height:200px"></networkChart>
                </div>
              </div>

              <!-- <div class="row">
                <div class="col-md-4">
                  <tempChart style="height:200px"></tempChart>
                </div>
                <div class="col-md-4">
                  <lightChart style="height:200px"></lightChart>
                </div>
                <div class="col-md-4">
                  <co2Chart style="height:200px"></co2Chart>
                </div>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import leafletMap from './Map';
  import cpuChart from './charts/Cpu';
  import memoryChart from './charts/Memory';
  import networkChart from './charts/Network';
  import deviceChart from './charts/Device';
  import connectChart from './charts/Connect';
  import tempChart from './charts/Temp';
  import lightChart from './charts/Light';
  import co2Chart from './charts/Co2';

  export default {
    name: 'Main',
    components: {
      leafletMap,
      cpuChart,
      memoryChart,
      networkChart,
      deviceChart,
      connectChart,
      tempChart,
      lightChart,
      co2Chart
    },
    data() {
      return {};
    },
    mounted() {
      $('[name="tianchuang"]').bootstrapSwitch({
        onText: "启动",
        offText: "停止",
        onColor: "warning",
        offColor: "success",
        size: "small",
        onSwitchChange: function (event, state) {
        }
      });
      $('[name="waizheyang"]').bootstrapSwitch({
        onText: "启动",
        offText: "停止",
        onColor: "warning",
        offColor: "success",
        size: "small",
        onSwitchChange: function (event, state) {
        }
      });
      $('[name="neizheyang"]').bootstrapSwitch({
        onText: "启动",
        offText: "停止",
        onColor: "warning",
        offColor: "success",
        size: "small",
        onSwitchChange: function (event, state) {
        }
      });
      $('[name="shilian"]').bootstrapSwitch({
        onText: "启动",
        offText: "停止",
        onColor: "warning",
        offColor: "success",
        size: "small",
        onSwitchChange: function (event, state) {
        }
      });
      $('[name="pentou"]').bootstrapSwitch({
        onText: "启动",
        offText: "停止",
        onColor: "warning",
        offColor: "success",
        size: "small",
        onSwitchChange: function (event, state) {
        }
      });
      $('[name="fengji"]').bootstrapSwitch({
        onText: "启动",
        offText: "停止",
        onColor: "warning",
        offColor: "success",
        size: "small",
        onSwitchChange: function (event, state) {
        }
      });
    }
  };
</script>

<style scoped>
  .m-container {
    display: flex;
    width: 100%;
    height: 100%;
  }

  .m-sensorTable {
    flex-grow: 1;
  }
  li{
    margin-top: 20px;
    list-style: none;
  }
</style>
